<#import "/macro.ftl" as m>
<@m.page_header title='后台' />
<div id="page-content-wrapper">

<div id="page-title">
    <h3>
        销售量分析
    </h3>
</div>

<div class="example-box">
	<div class="example-code">
        <a href="/stat/salesstatus" class="btn large primary-bg" title="">
            <span class="button-content">销售量现状</span>
        </a>
        &nbsp;&nbsp;
        <a href="/stat/salesconsist" class="btn large primary-bg" title="">
            <span class="button-content">销售量组成</span>
        </a>
        &nbsp;&nbsp;
        <a href="/stat/salestrend" class="btn large primary-bg" title="">
            <span class="button-content">销售量趋势</span>
        </a>
	</div>
</div>

<div class="pad10A">

<form id="form" action="/stat/salesconsist" method="get">
    		<div class="form-row">
    			<div class="form-input col-md-2">
    			<label for="from">
                    From:
                </label>
    				<#if startdate>
            		<input type="text"   name="startdate" data-trigger="focus" data-required="true" class="parsley-validated" value="${startdate}" onClick="WdatePicker({isShowWeek:true,dateFmt:'yyyy-MM-dd'})" style="clear:both;overflow:hidden;display:block">
          			<#else>
    				<input placeholder="起始时间" type="text"   name="startdate" data-trigger="focus" data-required="true" class="parsley-validated" value="" onClick="WdatePicker({isShowWeek:true,dateFmt:'yyyy-MM-dd'})" style="clear:both;overflow:hidden;display:block">
    				</#if>
    			</div>
    			<div class="form-input col-md-2">
    				<label for="from">
	                    To:
	                </label>	
    				<#if enddate>
		            <input type="text"   name="enddate" data-trigger="focus" data-required="true" class="parsley-validated" value="${enddate}" onClick="WdatePicker({isShowWeek:true,dateFmt:'yyyy-MM-dd'})" style="clear:both;overflow:hidden;display:block">
		            <#else>
		            <input placeholder="结束时间" type="text"   name="enddate" data-trigger="focus" data-required="true" class="parsley-validated" value="" onClick="WdatePicker({isShowWeek:true,dateFmt:'yyyy-MM-dd'})" style="clear:both;overflow:hidden;display:block">
		            </#if>
		        </div>
		        <div class="form-input col-md-2" style="margin-top:16px;">
		        	<select name="condition">
		        		<option value="month" <#if param=='month'>selected</#if>>月</option>
		        		<option value="week" <#if param=='week'>selected</#if>>周</option>
		        		<option value="year" <#if param=='year'>selected</#if>>年</option>
		        	</select>
		        </div>
    			<div class="form-input col-md-2" style="margin-top:16px;">
		        	<a href="javascript:;" class="btn large primary-bg radius-all-4" id="search" title="Validate!">
			            <span class="button-content">
			                查询
			            </span>
	                </a>
		        </div>
    		</div>
   </form>
<br>
<div style="col-md-12">
	<hr>
	<br>
	<div class="form-row">
		<div class="col-md-11" id="consist" ></div>    	
    </div>
</div>

</div>

<script type="text/javascript" src="/assets/js/minified/demo/exporting.js"></script>
<script type="text/javascript" src="/assets/js/minified/demo/highcharts.js"></script>
<script type="text/javascript">

$(function () {
    $('#consist').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: '销售量组成'
        },
        xAxis: {
            categories: [<#list xdateList as xdate>'${xdate}',</#list>]
        },
        yAxis: {
            min: 0,
            title: {
                text: '元'
            },
            stackLabels: {
                enabled: true,
                style: {
                    fontWeight: 'bold',
                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                }
            }
        },
        legend: {
            align: 'right',
            x: -70,
            verticalAlign: 'top',
            y: 20,
            floating: true,
            backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
            borderColor: '#CCC',
            borderWidth: 1,
            shadow: false
        },
        tooltip: {
            formatter: function() {
               return '<b>'+ this.x +'</b><br/>'+
                    this.series.name +': '+ this.y +'<br/>'+
                    'Total: '+ this.point.stackTotal;
            }
        },
        plotOptions: {
            column: {
                stacking: 'normal',
            }
        },
        series: [
        <#list yDate?keys as resultKey>
            		{name:'${resultKey}',  data:[<#list yDate[resultKey] as value>${value},</#list>]},
        </#list>
        ]
    });
});		

$(function(){
		$("#search").click(function(){
			$('#form').parsley('validate');
	    	$('#form').trigger('submit');
		});
	});								

</script>
